import React, { Component, lazy, Suspense } from "react";
import Tab from "./components/tab/Tab";
import {
  HashRouter as Router,
  Route,
  Redirect,
  Switch,
} from "react-router-dom";
import My from "./components/my/My";
import Login from "./components/login/Login";
import Register from "./components/register/Register"
import Pay from "./components/pay/Pay";
import MyLoginB from "./components/myLoginB/MyLoginB";
import OrderList from "./components/orderList/OrderList";
import GoodList from "./components/goodList/GoodList"
const Home = lazy(() => import("./components/home/Home"));
const Community = lazy(() => import("./components/community/Community"));
const Cart = lazy(() => import("./components/cart/Cart"));
const SearchCenter = lazy(() =>
  import("./components/searchCenter/SearchCenter")
);


const GoodDatail = lazy(() => import("./components/GoodDatail/GoodDatail"));
// import Target from "./targetIne/Target"
export default class App extends Component {
  constructor(props) {
    super(props);
    // console.log(props);
  }

  render() {
    return (
      <div>
        <Router>
          <Suspense fallback={<div>Loading...</div>}>
            <Switch>
              <Route
                exact
                path="/"
                render={(props) => (
                  <Tab {...props}>
                    <Home></Home>
                  </Tab>
                )}
              ></Route>
              <Route
                exact
                path="/community"
                render={(props) => (
                  <Tab {...props}>
                    <Community></Community>
                  </Tab>
                )}
              ></Route>
              <Route
                exact
                path="/cart"
                render={(props) => (
                  <Tab {...props}>
                    <Cart></Cart>
                  </Tab>
                )}
              ></Route>
              <Route
                exact
                path="/my"
                render={(props) => (
                  <Tab {...props}>
                    <My></My>
                  </Tab>
                )}
              ></Route>
              <Route
                exact
                path="/searchCenter"
                render={(props) => <SearchCenter {...props}></SearchCenter>}
              ></Route>
              <Route
                exact
                path="/GoodDatail/:goods_id"
                render={(props) => <GoodDatail {...props}></GoodDatail>}
              ></Route>

            </Switch>
          </Suspense>

          <Route
            path="/login"
            render={(props) => <Login {...props}></Login>}
          ></Route>
          <Route
            path="/myLoginB"
            render={(props) =>  <Tab {...props}>
            <MyLoginB></MyLoginB>
          </Tab>}
          ></Route>
          <Route
            path="/register"
            render={(props) => <Register {...props}></Register>}
          ></Route>
          <Route
            path="/orderList"
            render={(props) => <OrderList {...props}></OrderList>}
          ></Route>
          <Route
            path="/pay"
            render={(props) => <Pay {...props}></Pay>}
          ></Route>
          <Route
            path="/goodList"
            render={(props) => <GoodList {...props}></GoodList>}
          ></Route>
          {/* <Redirect to="/home"></Redirect> */}
        </Router>
      </div>
    );
  }
}
